<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  &__header{
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border-radius: 10px;
    &__cover{
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 1px 1px 5px #ccc;
      border: 1px solid #ccc;
      margin-right: 20px;
      cursor: pointer;
    }
    &__info{
      &__title{
        font-size: 18px;
        font-weight: bold;
      }
      &__shop{
        display: block;
        margin-top: 20px;
        font-size: 14px;
        color: #7f7f7f;
        &:hover{
          color: #999;
        }
      }
      &__price{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 15px;
        font-size: 18px;
        font-weight: bold;
        color: #f00;
      }
      &__sales{
        display: inline-block;
        margin-left: 30px;
        font-size: 14px;
        color: #7f7f7f;
      }
      &__tag{
        margin-right:4px;
        padding: 2px 8px;
        background: #d8ddde;
        display: inline-block;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        margin-top: 10px;
        color: #0a636d;
      }
    }
  }
  &__article{
    display: flex;
    flex-direction: row;
    background: #fff;
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
    &__iframe{
      margin-left: 30px;
      flex: 1;
      height: 700px;
    }
  }
}
</style>
<template>
  <div class="container">
    <header class="container__header">
      <a :href="goodsInfo.link" target="_blank">
        <img :src="goodsInfo.cover" class="container__header__cover">
      </a>
      <div class="container__header__info">
        <div class="container__header__info__title">{{ goodsInfo.title }}</div>
        <a :href="goodsInfo.shopSrc" class="container__header__info__shop" target="_blank">{{ goodsInfo.shopName }}</a>
        <div class="container__header__info__price">
          <span>￥{{ goodsInfo.price }}</span>
          <span class="container__header__info__sales">销量{{ goodsInfo.sales }}</span>
        </div>
        <span class="container__header__info__tag" v-for="item of goodsInfo.tagName" :key="item">{{ item }}</span>
      </div>
    </header>
    <article class="container__article">
      <div>
        <el-form ref="form" :model="form" label-position="left">
          <el-form-item label="商品名称" style="width: 300px">
            <el-input  v-model="form.goodsName"></el-input>
          </el-form-item>
          <el-form-item label="价格" style="width: 300px">
            <el-input  v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="店铺名称" style="width: 300px">
            <el-input  v-model="form.shopName"></el-input>
          </el-form-item>
          <el-form-item label="店铺链接" style="width: 300px">
            <el-input v-model="form.shopSrc"></el-input>
          </el-form-item>
          <el-form-item label="销量" style="width: 300px">
            <el-input  v-model="form.sales"></el-input>
          </el-form-item>
          <el-form-item label="商品链接" style="width: 300px">
            <el-input  v-model="form.goodsSrc"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" style="width: 300px">
            <el-input v-model="form.goodsImg"></el-input>
          </el-form-item>
          <el-form-item label="标识(使用，分割)" style="width: 300px">
            <el-input  v-model="form.tagName"></el-input>
          </el-form-item>

        </el-form>
        <el-button @click="commit">提交</el-button>
      </div>
      <iframe :src="goodsInfo.link" frameborder="0" class="container__article__iframe"></iframe>
    </article>
    <footer class="container__footer">

    </footer>
  </div>
</template>

<script>
import { updateGoodsList, getGoodsList } from '@/api/shop'
export default {
data(){
    return {
      goodsInfoApi:{},
      form:{
        id:'',
        goodsName:'',
        price:'',
        shopName:'',
        shopSrc:'',
        sales:'',
        goodsSrc:'',
        goodsImg:'',
        tagName:'',
      }
    }
},
  created(){
    this.getOrderLists();
  },
  computed:{
    goodsInfo:(_this = this) => ({
      id: _this.goodsInfoApi.id,
      cover: _this.goodsInfoApi.goods_img || '', // 封面
      title: _this.goodsInfoApi.title || '', // 标题
      link: _this.goodsInfoApi.goods_src || '/', // 链接
      price: _this.goodsInfoApi.prince || '暂无 ', // 价格
      sales: _this.goodsInfoApi.sales || '暂无 ', // 销量
      shopName: _this.goodsInfoApi.shop_name || '暂无', // 店铺名称
      shopSrc: _this.goodsInfoApi.shop_src && _this.goodsInfoApi.shop_src.includes('http') ? _this.goodsInfoApi.shop_src : null, // 店铺链接
      tagName: _this.goodsInfoApi.tag_name && _this.goodsInfoApi.tag_name.trim().split(',') || '暂无', // 标签名称
    })
  },
  watch:{
    goodsInfoApi(value){
      this.form = {
        id:value?.id,
        goodsName: value?.title,
        price: value?.prince,
        shopName: value?.shop_name,
        shopSrc:  value?.shop_src,
        sales: value?.sales,
        goodsSrc: value?.goods_src,
        goodsImg: value?.goods_img,
        tagName: value?.tag_name,
      }
    }
  },
methods:{
  async commit(){
    const res = await updateGoodsList(this.form)
    const { code,msg } = res;
    if(Number(code) === 100) return this.getOrderLists()
    this.$message.error(msg)
    },
    //表格数据获取方法
    async getOrderLists() {
      // 获取接口数据 进行赋值
      const res = await getGoodsList({id: this.$route.query.id});
        if (res.code !== 100) return this.$message.error(res.msg)
      const { data } = res?.data;
      this.goodsInfoApi = data && data.length && data[0]
    },

}
}
</script>
